<!--
 * @Author: 杨伟韦
 * @Date: 2025-05-25 15:30:21
 * @LastEditors: 杨伟韦
-->
<template>
  <div class="right-content">
    <UserInfo />
    <!-- <AblumManager /> -->

    <div class="ablum-container">
      <div class="album-left">
        <h2>类别</h2>
        <div style="height: 10px"></div>
        <Skeleton :loading="state.typeLoading" animated>
          <template #template>
            <SkeletonItem width="100px" height="40px" class="ivu-mr" />
            <SkeletonItem width="100px" height="40px" class="ivu-mr" />
            <SkeletonItem width="100px" height="40px" class="ivu-mr" />
            <SkeletonItem width="100px" height="40px" class="ivu-mr" />
            <SkeletonItem width="100px" height="40px" class="ivu-mr" />
            <SkeletonItem width="100px" height="40px" class="ivu-mr" />
            <SkeletonItem width="100px" height="40px" class="ivu-mr" />
          </template>
          <template #default>
            <div class="album-type-list">
              <div
                class="album-type-arrow album-type-arrow-left"
                @click="scrollToLeft"
                v-if="!state.isAtLeft"
              >
                <Icon type="ios-arrow-back" />
              </div>
              <div
                class="album-type-arrow album-type-arrow-right"
                @click="scrollToRight"
                v-if="!state.isAtRight"
              >
                <Icon type="ios-arrow-forward" />
              </div>
              <div class="album-type" ref="refScroll" @scroll="handleScroll">
                <view
                  v-for="(item, index) in state.typesData"
                  :key="item.id"
                  :class="`album-type-item ${item.id === state.activeType ? 'active' : ''}`"
                  @click="handleSelectType(item)"
                >
                  <Icon
                    :type="item.categoryIcon || state.types[index]?.icon"
                    size="18"
                    :color="state.types[index]?.color"
                  />
                  &nbsp;
                  {{ item.categoryIntro }}
                </view>
              </div>
            </div>
          </template>
        </Skeleton>

        <!-- <div style="height: 20px"></div>
        <h2>热门模版</h2>
        <div class="album-hot">
          <z-swiper
            grabCursor
            :modules="modules"
            slidesPerView="6"
            :spaceBetween="10"
            loop
            :autoplay="{ delay: 1000, disableOnInteraction: true, pauseOnMouseEnter: true }"
          >
            <z-swiper-item v-for="item in list" :key="item.id">
              <view class="album-hot-item">{{ item.text }}</view>
            </z-swiper-item>
          </z-swiper>
        </div> -->

        <div style="height: 20px"></div>
        <h2>开始探索</h2>

        <ul class="template-right-list">
          <li v-for="item in state.dataSource" :key="item.id">
            <div class="template-img-box">
              <Image
                class="template-img"
                :src="item.coverUrl"
                lazy
                fit="contain"
                width="90%"
                height="90%"
              />
              <div class="template-img-btns">
                <div class="template-img-preview">预览</div>
                <div class="template-img-use" @click="handleUse(item.id)">使用</div>
              </div>
            </div>
            <div class="template-title">{{ item.name }}</div>
            <div class="template-desc">
              <label>官</label>
              <span v-if="item.freeFlag">免费</span>
              <span class="price" v-else>¥{{ item.price }}</span>
            </div>
          </li>
        </ul>

        <!-- <Scroll /> -->
      </div>
      <div class="album-right">
        <h2>最近设计</h2>
        <ul class="design-list">
          <li>
            <img src="https://picsum.photos/200/300" alt="" />
            <label>夏日美好，爱你每一天....</label>
          </li>
          <li>
            <img src="https://picsum.photos/200/300" alt="" />
            <label>夏日美好，爱你每一天....</label>
          </li>
          <li>
            <img src="https://picsum.photos/200/300" alt="" />
            <label>夏日美好，爱你每一天....</label>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script name="menus" setup>
import UserInfo from './user-info.vue';
import AblumManager from './ablum-manager.vue';
import { Autoplay } from '@zebra-ui/swiper/modules';
import { getAlbumCategoryList, getAlbumTemplatePage, getUserAlbumTemplateList } from '@/api/home';
import { Message } from 'view-ui-plus';
import { ref } from 'vue';
import { to } from '@/utils/await-to';
import { useRouter } from 'vue-router';
const router = useRouter();

const state = reactive({
  typeLoading: true,
  userTemplateLoading: false,
  typesData: [],
  types: [
    {
      icon: 'md-clock',
      color: 'rgb(74, 83, 250)',
    },
    {
      icon: 'md-ionitron',
      color: 'rgb(0, 196, 204)',
    },
    {
      icon: 'logo-octocat',
      color: 'rgb(236, 152, 9)',
    },
    {
      icon: 'md-cut',
      color: 'rgb(139, 61, 255)',
    },
    {
      icon: 'md-nuclear',
      color: 'rgb(181, 25, 99)',
    },
    {
      icon: 'md-walk',
      color: 'rgb(255, 59, 75)',
    },
    {
      icon: 'md-contacts',
      color: 'rgb(210, 105, 230)',
    },
    {
      icon: 'md-color-palette',
      color: 'rgb(255, 59, 75)',
    },
    {
      icon: 'md-print',
      color: 'rgb(139, 61, 255)',
    },
  ],
  activeType: '',
  isAtLeft: true,
  isAtRight: true,
  // 探索数据
  dataSource: [],
});

const modules = ref([Autoplay]);
const list = ref(
  Array.from({
    length: 20,
  }).map((item, index) => {
    return {
      text: `Slide ${index + 1}`,
      id: index + 1,
    };
  })
);
const refScroll = ref(null);

// 获取用户最近编辑相册
const fetchUserAlbumTemplateList = async () => {
  state.userTemplateLoading = true;
  const res = await getUserAlbumTemplateList();
  state.userTemplateLoading = false;
  const { success, data, msg } = res?.data || {};
};

// 获取类型
const fetchAlbumCategoryList = async () => {
  state.typeLoading = true;
  const res = await getAlbumCategoryList();
  state.typeLoading = false;
  const { success, data, msg } = res?.data || {};

  if (!success) return Message.warning(msg || '获取相册分类失败');
  console.log(data);
  state.typesData = data || [];
  handleSelectType(data[0]);
};

// 获取相册列表
const fetchAlbumTemplatePage = async () => {
  const [err, res] = await to(
    getAlbumTemplatePage({
      current: 1,
      size: 100,
      categoryId: state.activeType,
      // searchWords: '',
    })
  );

  if (err) return Message.warning('获取相册列表失败');

  const { data } = res?.data || {};
  state.dataSource = data?.records || [];
};

// 使用相册
const handleUse = (id) => {
  router.push('/editor/' + id);
};

const handleSelectType = (select) => {
  state.activeType = select.id;

  fetchAlbumTemplatePage();
};

const handleScroll = (event) => {
  const target = event.target;
  // 计算剩余滚动距离
  const scrollRemaining = target.scrollWidth - target.scrollLeft - target.clientWidth;
  console.log(scrollRemaining);
  // 判断是否滚动到最左侧
  state.isAtLeft = target.scrollLeft === 0;
  // 判断是否滚动到最右侧（考虑到可能存在的舍入误差）
  state.isAtRight = scrollRemaining < 1;
};

const scrollToLeft = () => {
  refScroll.value.scrollTo({
    left: 0,
    behavior: 'smooth',
  });
};

const scrollToRight = () => {
  const container = refScroll.value;
  container.scrollTo({
    left: container.scrollWidth - container.clientWidth,
    behavior: 'smooth',
  });
};

onMounted(() => {
  fetchAlbumCategoryList();
  fetchUserAlbumTemplateList();
});
</script>
<style lang="less" scoped>
.right-content {
  padding: 0 18px;
  background-color: #fff;
  width: calc(100% - 80px);
}

.ablum-container {
  display: flex;

  .ivu-skeleton-with-title {
    margin-top: -17px;
  }

  .album-left {
    width: 70%;
  }

  .album-right {
    width: 29%;
    margin-left: 1%;

    .design-list {
      padding: 0;

      li {
        display: flex;
        align-items: center;
        margin-top: 12px;

        img {
          width: 30px;
          height: 30px;
          border-radius: 10px;
          background-color: #aaa;
          margin-right: 6px;
        }

        label {
          font-size: 14px;
          color: #333;
        }
      }
    }
  }
}

.album-type-list {
  width: 100%;
  height: 45px;
  overflow-x: auto;
  overflow-y: hidden;
  position: relative;
  transition: all 0.3s ease;
  opacity: 1;

  .album-type-arrow {
    position: absolute;
    top: 0;
    width: 30px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    &.album-type-arrow-left {
      left: 0;
      background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 1),
        rgba(255, 255, 255, 0.9),
        rgba(255, 255, 255, 0.3)
      );
    }

    &.album-type-arrow-right {
      right: 0;
      background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.3),
        rgba(255, 255, 255, 0.4),
        rgba(255, 255, 255, 1)
      );
    }
  }
}

.album-type {
  display: flex;
  height: 80px;
  overflow-x: auto;

  .album-type-item {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #333333;
    border: 1px solid #eee;
    border-radius: 6px;
    margin-right: 8px;
    background-color: #fff;

    height: 40px;
    padding: 0 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;

    &.active {
      border: 1px solid var(--primary-color);
      background-color: var(--background-primary-color);
    }
  }
}
.album-hot {
  width: 100%;

  .album-hot-item {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    background-color: aquamarine;
    border-radius: 8px;
    overflow: hidden;
  }
}

.template-right-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 12px;

  li {
    width: 200px;
    border: 1px solid var(--color--border-float);
    border-radius: 6px;
    overflow: hidden;
    padding-bottom: 6px;
    margin-bottom: 12px;
    margin-right: 12px;

    .template-img-box {
      height: 150px;
      position: relative;
      background-color: var(--background-primary-color);

      &:hover {
        .template-img-btns {
          opacity: 1;
        }

        .template-img {
          opacity: 0;
        }
      }

      .template-img {
        opacity: 1;
        transition: all 0.3s ease-in-out;
        margin-left: 5%;
        margin-top: 4%;
      }

      .template-img-btns {
        transition: all 0.3s ease-in-out;
        position: absolute;
        opacity: 0;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        .template-img-preview,
        .template-img-use {
          width: 50%;
          height: 100%;
          line-height: 30px;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .template-img-preview {
          background-color: var(--background-primary-color);
        }

        .template-img-use {
          background-color: var(--primary-color-hover);
        }
      }
    }

    .template-title {
      font-size: 14px;
      line-height: 22px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      padding: 6px 10px;
    }

    .template-desc {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;

      label {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        border: 1px solid var(--color--border-float);
        border-radius: 10px;
        font-size: 12px;
        /* color: var(--primary-color); */
        background-color: var(--secondary-color);
      }

      span {
        display: inline-block;
        font-size: 10px;
        padding: 2px 4px;
        border-radius: 2px;
        background-color: var(--color--border-float);

        &.price {
          background-color: transparent;
          font-size: 14px;
          color: var(--third-color);
          font-weight: bold;
        }
      }
    }
  }
}
</style>
